<template>
  <div class="zong" style="background-color: lightyellow">
    <div class="message">
      <h1 style="font-size: 34px">我的消息中心</h1>
      <el-card class="card">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="🔔系统消息" name="first">
            <p v-if="house.length==0" style="font-size: 18px; color: gray;text-align:center">你还没有收到系统消息~</p>

            <div v-else class="block">
              <el-timeline>
                <el-timeline-item :timestamp="item.house.hreleasedate" placement="top"  v-for="item in house" :key="item">
                  <el-card>
                    <h4 v-if="item.examine.state==2">房屋信息审核中</h4>
                    <h4 v-if="item.examine.state==1">房屋信息审核通过</h4>
                    <h4 v-if="item.examine.state==3">房屋信息审核未通过</h4>
                    <el-card class="card1" shadow="never">
                      <img class="collection" :src="item.img" :alt="item.house.htitle" />
                      <div
                        style="
                          float: right;
                          margin-right: 17%;
                          width: 230px;
                          height: 100px;
                          margin-top: -10px;
                        "
                      >
                        <p style="font-size: 16px; font-weight: bold">
                          {{item.house.htitle}}
                        </p>
                        <p
                          style="
                            margin-right: 10%;
                            font-size: 13px;
                            color: gray;
                            margin-top: -10px;
                          "
                        >
                          {{item.house.hestate}}
                        </p>
                        <p style="margin-top: -10px; color: orangered">
                          发布时间:{{item.house.hreleasedate}}
                          <el-tag v-if="item.examine.state==2" size="mini" style="margin-left:20px;">审核中</el-tag>
                          <el-tag v-else-if="item.examine.state==1" size="mini" type="success" style="margin-left:20px;">审核成功</el-tag>
                          <el-tag v-else size="mini" style="margin-left: 20px"
                            >审核中</el-tag
                          >
                        </p>
                      </div>
                      <span
                        style="
                          font-weight: bold;
                          float: right;
                          margin-right: 10%;
                          color: red;
                          margin-top: 30px;
                        "
                      >
                        {{item.house.hprice}}/月
                      </span>
                      <div
                        style="float: right; margin-left: 70%; margin-top: -22%"
                      >
                        <el-button @click="toSingleHouse(item.house.hid)"> 查看 </el-button>
                      </div>
                    </el-card>
                    <!-- <p>王小虎 提交于 2018/4/1 20:46</p> -->
                  </el-card>
                </el-timeline-item>
                <!-- <el-timeline-item timestamp="2018/4/2" placement="top">
                  <el-card>
                    <h4>更新 Github 模板</h4>
                    <p>王小虎 提交于 2018/4/2 20:46</p>
                  </el-card>
                </el-timeline-item> -->
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="📣回复消息" name="second">
            <!-- <p style="font-size: 18px; color: gray;text-align:center">你还没有收到评论~</p> -->

            <div class="block">
              <el-timeline>
                <el-timeline-item timestamp="2020/12/10" placement="top">
                  <el-card>
                    <span style="font-weight: bold">李狗蛋</span>
                    <span>在该房源下回复了你：</span>
                    <!-- -------------留言内容------------- -->
                    <p style="font-size: 12px; color: gray">
                      这房子不错，我喜欢，先租个50年！！！！
                    </p>
                    <!-- ----------------哪座房子----- -->
                    <el-card class="card1" shadow="never">
                      <img class="collection" src="../img/pwd1.jpg" alt="" />
                      <div
                        style="
                          float: right;
                          margin-right: 17%;
                          width: 230px;
                          height: 100px;
                          margin-top: -10px;
                        "
                      >
                        <p style="font-size: 16px; font-weight: bold">
                          合租·金三角花园·4室1厅
                        </p>
                        <p
                          style="
                            margin-right: 10%;
                            font-size: 13px;
                            color: gray;
                            margin-top: -10px;
                          "
                        >
                          崂山区/石老人
                        </p>
                        <p style="margin-top: -10px; color: orangered">
                          发布时间:2020/10/10
                          <!-- <el-tag size="mini" style="margin-left:20px;">审核中</el-tag> -->
                          <!-- <el-tag size="mini" type="success" style="margin-left:20px;">审核成功</el-tag> -->
                          <el-tag
                            size="mini"
                            type="success"
                            style="margin-left: 20px"
                            >审核通过</el-tag
                          >
                        </p>
                      </div>
                      <span
                        style="
                          font-weight: bold;
                          float: right;
                          margin-right: 10%;
                          color: red;
                          margin-top: 30px;
                        "
                      >
                        900/月
                      </span>
                      <div
                        style="float: right; margin-left: 70%; margin-top: -22%"
                      >
                        <el-button> 查看 </el-button>
                      </div>
                    </el-card>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="💬收到的评论" name="third">
            <p style="font-size: 18px; color: gray;text-align:center" v-if="comment.length==0||comment.length==undefined">你还没有收到评论~</p>
            <div v-else class="block" v-for="item in comment" :key="item">
              <el-timeline>
                <el-timeline-item :timestamp="item.comment.cdate" placement="top">
                  <el-card>
                     <span style="font-weight: bold">{{item.user.uname}}</span>
                    <span>给您留言了：</span>
                    <!-- <span style="font-weight: bold"> {{item.house.htitle}}</span> -->
                    <!-- -------------评论内容------------- -->
                    <p style="font-size: 12px; color: gray">
                      {{item.comment.ccontent}}
                    </p>
                    <!-- ----------------哪座房子----- -->
                    <el-card class="card1" shadow="never">
                      <img class="collection" :src="item.img" :alt="item.house.htitle" />
                      <div
                        style="
                          float: right;
                          margin-right: 17%;
                          width: 230px;
                          height: 100px;
                          margin-top: -10px;
                        "
                      >
                        <p style="font-size: 16px; font-weight: bold">
                          {{item.house.htitle}}
                        </p>
                        <p
                          style="
                            margin-right: 10%;
                            font-size: 13px;
                            color: gray;
                            margin-top: -10px;
                          "
                        >
                          {{item.house.hestate}}
                        </p>
                        <p style="margin-top: -10px; color: orangered">
                          发布时间:{{item.house.hreleasedate}}
                          <!-- <el-tag size="mini" style="margin-left:20px;">审核中</el-tag> -->
                          <!-- <el-tag size="mini" type="success" style="margin-left:20px;">审核成功</el-tag> -->
                          <!-- <el-tag
                            size="mini"
                            type="success"
                            style="margin-left: 20px"
                            >审核通过</el-tag
                          > -->
                        </p>
                      </div>
                      <span
                        style="
                          font-weight: bold;
                          float: right;
                          margin-right: 10%;
                          color: red;
                          margin-top: 30px;
                        "
                      >
                        {{item.house.hprice}}/月
                      </span>
                      <div
                        style="float: right; margin-left: 70%; margin-top: -22%"
                      >
                        <el-button @click="toSingleHouse(item.house.hid)"> 查看 </el-button>
                      </div>
                    </el-card>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
          <el-tab-pane label="👮‍举报消息" name="fourth">
            <p v-if="report.length==0" style="font-size: 18px; color: gray;text-align:center">你还没有发布过举报消息~</p>

            <div v-else class="block">
              <el-timeline v-for="item in report" :key="item">
                <el-timeline-item timestamp="2022/04/01" placement="top">
                  <el-card>
                    <span>您以下房源的举报</span>
                    <span v-if="item.report.state===2" style="font-weight: bold;">正在审核</span>
                    <span v-else-if="item.report.state===1" style="font-weight: bold">举报成功</span>
                    <span v-else style="font-weight: bold">举报失败</span>
                    <br />
                    <br />
                    <!-- -------------举报内容------------- -->
                    <span>您的举报理由：</span>
                    <span style="font-size: 12px; color: gray">
                      {{item.report.reason}}
                    </span>
                    <!-- ----------------举报的哪座房子----- -->
                    <el-card class="card1" shadow="never">
                      <img class="collection" :src="item.img" :alt="item.house.htitle" />
                      <div
                        style="
                          float: right;
                          margin-right: 17%;
                          width: 230px;
                          height: 100px;
                          margin-top: -10px;
                        "
                      >
                        <p style="font-size: 16px; font-weight: bold">
                          {{item.house.htitle}}
                        </p>
                        <p
                          style="
                            margin-right: 10%;
                            font-size: 13px;
                            color: gray;
                            margin-top: -10px;
                          "
                        >
                          {{item.house.hestate}}
                        </p>
                        <p style="margin-top: -10px; color: orangered">
                          发布时间:{{item.house.hreleasedate}}
                        </p>
                      </div>
                      <span
                        style="
                          font-weight: bold;
                          float: right;
                          margin-right: 10%;
                          color: red;
                          margin-top: 30px;
                        "
                      >
                        {{item.house.hprice}}/月
                      </span>
                      <div
                        style="float: right; margin-left: 70%; margin-top: -22%"
                      >
                        <el-button @click="toSingleHouse(item.house.hid)"> 查看 </el-button>
                      </div>
                    </el-card>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <!-- ------------------------尾部-------------------- -->
    <br />
    <br />
    <el-footer style="background-color: #f5f5f6; display: flex">
      <div
        style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
          "
      >
        <p style="text-align: center; margin-top: 28px">
          <a
            style="
              color: #545c64;
              font-size: 26px;
              font-weight: bold;
              text-decoration: none;
            "
            href="#/"
            >泊寓</a
          >
        </p>
      </div>
      <div
        style="
            width: 50%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
      >
        <p style="font-size: 13px; text-align: center; margin-top: 35px">
          <img src="../img/pl.png" style="width: 12px" /> 鲁公网安备
          31010402000253号 | 鲁ICP备17003747号
        </p>
      </div>
      <div
        style="
            width: 20%;
            height: 90px;
            <!-- border: 1px solid red; -->
            align-self: center;
            margin-left: 3%;
          "
      >
        <p style="font-size: 14px; text-align: center; margin-top: 35px">
          <i class="el-icon-phone-outline">010-6088-8888</i>
        </p>
      </div>
    </el-footer>
  </div>
</template>

<script>
import { reportByUid } from "@/network/house";
import { getCommentByUid } from '@/network/house'
import { getHouseByUid } from "@/network/house"
export default {
  data() {
    return {
      report:[],
      house:[],
      comment:[],
      activeName: "first",
    };
  },
  created() {
    if (this.$store.state.user.uid === "") {
      this.$message.error("您没有权限访问本页面");
      this.$router.push("/");
    }
    let uid = this.$store.state.user.uid;
    reportByUid(uid).then((res) => {
      console.log("report", res);
      this.report = res;
    });
    getCommentByUid(uid).then((res) => {
      console.log('comment', res);
      this.comment = res;
    })
    getHouseByUid(uid).then(res=>{
      console.log('house',res);
      this.house = res;
    })
  },
  methods: {
    toSingleHouse(hid) {
      console.log(hid);
      this.$router.push("/singleHome/" + hid);
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
.zong {
  text-align: center;
  width: 99%;
  height: auto;
}
.message {
  padding-top: 6%;
  margin: 0 auto;
  width: 86%;
  min-height: 600px;
}
.card {
  text-align: left;
  min-height: 500px;
  padding-right: 50px;
}
.card1 {
  margin-top: 20px;
  margin-left: 20px;
  width: 90%;
  height: 120px;
}
.collection {
  width: 150px;
  height: 90px;
  margin-top: -5px;
}
</style>